<template>
  <view>
    <!-- 登录 -->
    <view class="login-box">
      <view class="login login-no" v-if="!userInfo" @tap="login">立即登录</view>
      <view class="login login-yes" v-else>
        <view class="login-avatar">
          <image :src="userInfo.avatar" />
        </view>
        <view class="login-name">{{ userInfo.nickname }}</view>
      </view>
    </view>
    <!-- 订货单 -->
    <view class="icon-box" style="margin-top: -40rpx">
      <view class="icon-title">
        <view class="title">订货单</view>
        <view class="tip" @tap="toOrder(0)">
          <text>全部</text>
          <text class="iconfont icon-jiantou"></text>
        </view>
      </view>
      <view class="icon-content">
        <view
          class="icon-item1"
          v-for="(item, index) in iconOrder"
          :key="index"
          @tap="toOrder(index + 1)"
        >
          <view class="i-box">
            <view class="item-number" v-if="item.number > 0">{{
              item.number
            }}</view>
            <view class="t-icon" :class="item.icon"></view>
          </view>
          <view class="item-title">{{ item.title }}</view>
        </view>
      </view>
    </view>
    <!-- 常用功能 -->
    <view class="icon-box common-box" style="margin-top: 20rpx">
      <view class="icon-title">
        <view class="title">常用功能</view>
      </view>
      <view class="icon-content">
        <view
          class="icon-item"
          v-for="(item, index) in iconCommon"
          :key="index"
          @tap="tapCommonFunction(item.title, item.url)"
        >
          <view class="t-icon" :class="item.icon"></view>
          <view class="item-title">{{ item.title }}</view>
          <button v-if="item.title === '在线客服'" open-type="contact"></button>
        </view>
      </view>
    </view>
    <!-- 版本 -->
    <view class="version-box">
      <view class="copyright">{{
        String(
          '&#29256;&#26435;&#24402;&#22235;&#24029;&#20248;&#29399;&#31185;&#25216;&#26377;&#38480;&#20844;&#21496;&#25152;&#26377;'
        )
      }}</view>
      <view class="version">版本号{{ version }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: null,
      iconOrder: [
        {
          title: '待审核',
          icon: 't-icon-daishenhe',
          number: 0,
          id: 0
        },
        {
          title: '待发货',
          icon: 't-icon-daifahuo',
          number: 0,
          id: 2
        },
        {
          title: '待收货',
          icon: 't-icon-daishouhuo',
          number: 0,
          id: 3
        },
        {
          title: '已收货',
          icon: 't-icon-yishouhuo',
          number: 0,
          id: 4
        }
      ],
      iconCommon: [
        {
          title: '账户管理',
          icon: 't-icon-zhanghuguanli',
          url: '/pages/my/commonFunction/accountManagement/index'
        },
        {
          title: '收货地址',
          icon: 't-icon-shouhuodizhi',
          url: '/pages/my/commonFunction/address/index'
        },
        {
          title: '浏览历史',
          icon: 't-icon-liulanlishi',
          url: '/pages/my/commonFunction/history/index'
        },
        {
          title: '关于我们',
          icon: 't-icon-yinsixieyi',
          url: '/pages/my/commonFunction/agreement/index'
        },
        {
          title: '在线客服',
          icon: 't-icon-kefu1',
          url: ''
        },
        {
          title: '清除缓存',
          icon: 't-icon-qingkonghuancun',
          url: ''
        }
      ],
      version: ''
    }
  },
  onShow() {
    this.getCartNumber()
    this.getNumber()
  },
  async onLoad() {
    this.userInfo = uni.getStorageSync('userInfo')
    this.version = (await this.$set.getSet('version'))[0].value
  },
  methods: {
    // 获取我的订单数量
    async getNumber() {
      this.iconOrder.forEach(async (item) => {
        if (item.id === 4) return
        const res = await this.$http.post(
          '/api/kuerp/order/index/getOrderList',
          {
            status: item.id
          }
        )
        if (res.code == 200) {
          item.number = res.data.count
        }
      })
    },
    // 获取购物车数量
    async getCartNumber() {
      const res = await this.$http.post(
        '/api/kuerp/order/index/getCartNumber',
        false
      )
      if (res.code == 200) {
        if (res.data === 0) {
          uni.removeTabBarBadge({ index: 2 })
        } else {
          uni.setTabBarBadge({
            index: 2,
            text: res.data + ''
          })
        }
      }
    },
    // 登录
    login() {
      uni.navigateTo({ url: '/pages/login/index' })
    },
    // 前往订货单页面
    toOrder(current) {
      uni.navigateTo({ url: `/pages/my/order/index?current=${current}` })
    },
    // 点击常用功能
    tapCommonFunction(title, url) {
      if (title === '清除缓存') {
        uni.showToast({
          title: '清除成功',
          icon: 'success'
        })
      } else {
        uni.navigateTo({ url })
      }
    }
  }
}
</script>

<style>
page {
  background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
// 登录
.login-box {
  height: 500rpx;
  background: linear-gradient(126deg, #ff6d32 0%, #fe3d23 100%);
  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 460rpx;
    color: #ffffff;
    font-weight: 500;
  }
  .login-no {
    font-size: 48rpx;
  }
  .login-yes {
    flex-direction: column;
    .login-avatar {
      width: 200rpx;
      height: 200rpx;
      background: #fff;
      border-radius: 50%;
      image {
        transform: scale(0.95);
        background-color: #ddd;
        border-radius: 50%;
      }
    }
    .login-name {
      margin-top: 40rpx;
      font-size: 36rpx;
    }
  }
}

// 订货单 & 常用功能
.icon-box {
  margin: 0 auto;
  padding: 36rpx 24rpx 0;
  width: 702rpx;
  height: 260rpx;
  background: #ffffff;
  border-radius: 12rpx;
  .icon-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 32rpx;
      font-weight: 600;
      color: #111111;
    }
    .tip {
      display: flex;
      align-items: center;
      color: #999999;
      text {
      }
      .icon-jiantou {
        font-size: 22rpx;
      }
    }
  }
  .icon-content {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40rpx;
    .icon-item {
      position: relative;
      width: 25%;
      text-align: center;
      .t-icon {
        width: 60rpx;
        height: 60rpx;
      }
      .item-title {
        margin-top: 20rpx;
        font-size: 24rpx;
        color: #333333;
        line-height: 24rpx;
      }
      button {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }
    .icon-item1 {
      width: 25%;
      // text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .i-box {
        position: relative;
        width: 60rpx;
        height: 60rpx;
        // display: flex;
        // justify-content: center;
        // align-items: center;
        .t-icon {
          width: 60rpx;
          height: 60rpx;
        }
        .item-number {
          position: absolute;
          top: -20rpx;
          right: -20rpx;
          background-color: #f74444;

          color: #fff;
          min-width: 40rpx;
          height: 40rpx;
          font-size: 20rpx;
          font-weight: 500;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          padding: 2rpx;
          align-items: center;
        }
      }
      .item-title {
        margin-top: 20rpx;
        font-size: 24rpx;
        color: #333333;
        line-height: 24rpx;
      }
    }
  }
}

.common-box {
  height: 404rpx;
  .icon-content {
    margin-top: 0;
    .icon-item {
      margin-top: 40rpx;
    }
  }
}

// 版本
.version-box {
  margin: 158rpx 0 42rpx;
  text-align: center;
  font-size: 24rpx;
  color: #aaaaaa;
  .copyright {
    display: flex;
    justify-content: center;
    align-items: center;
    &::before,
    &::after {
      content: '';
      display: inline-block;
      margin-right: 20rpx;
      width: 100rpx;
      height: 1px;
      background: #aaaaaa;
    }
    &::after {
      margin-right: 0;
      margin-left: 20rpx;
    }
  }
  .version {
    margin-top: 20rpx;
  }
}
</style>
